<template>
  <el-aside width="180px" v-if="sideData.length !== 0">
    <el-menu :default-active="this.$router.options.routes[2].path" router @open="open">


<el-dialog title="人数分析(频率最低为30分钟)" :visible.sync="dialogFormVisible" center>
  <el-form :model="form" :disabled="formdisabled">
    人数分析频率（分钟/次）
    <el-input style="width:20%"
  placeholder="请输入数字"
  v-model="form.cron"
  clearable>
</el-input>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button :disabled="btndiasbled" type="primary" @click="sendcorn()">确 定</el-button>
  </div>
</el-dialog>

      <el-submenu index="deviceList">
        <template slot="title">设备监测</template>
        <el-menu-item index="/admin" @click="showDeviceList(1)">
          在线设备
        </el-menu-item>
        <el-menu-item index="showDeviceList_Offline" @click="showDeviceList(0)">
          离线设备
        </el-menu-item>
      </el-submenu>
      <el-submenu index="manageDevice" v-if="roleId!=='3'">
        <template slot="title">设备管理</template>
        <el-menu-item @click="manageDeviceType">
          设备类型管理
        </el-menu-item>
        <el-menu-item @click="manageDeviceBrand">
          设备品牌管理
        </el-menu-item>
      </el-submenu>

<el-submenu index="managePhoto" v-if="roleId=='0'">
   <template slot="title">图形分析</template>
<el-menu-item @click="dialogForm()">
          人数识别
        </el-menu-item>

<el-menu-item  @click="photoshow()">
     分析结果预览
        </el-menu-item>
</el-submenu>


<el-submenu index="manageStudy" v-if="roleId=='0'">
   <template slot="title">红外自学习</template>
<el-menu-item @click="hwStudy()">
          进入自学习
        </el-menu-item>
</el-submenu>


      <el-submenu index="manageUser" v-if="roleId==='0'">
        <template slot="title">人员管理</template>
        <el-menu-item @click="managePropertyPersonnel">
          物业人员
        </el-menu-item>
        <el-menu-item @click="manageTeachingStaffs">
          教职工
        </el-menu-item>
        <el-menu-item @click="manageCommonUser">
          普通用户
        </el-menu-item>
      </el-submenu>
      <el-submenu index="manageRoom" v-if="roleId!=='3'">
        <template slot="title">区域管理</template>
        <el-menu-item @click="manageGroups">
          分组管理
        </el-menu-item>
        <el-menu-item @click="manageBlock">
          区域块管理
        </el-menu-item>
        <el-menu-item @click="manageRoomType">
          区域类型管理
        </el-menu-item>
      </el-submenu>
      <template v-for="item in this.$router.options.routes[id].children">
        <el-submenu :index="item.path" v-if="item.childNode">
          <!-- :index="item.path" -->
          <template slot="title">{{ item.name }}</template>
          <template v-if="item.needList">
            <el-submenu index="0">
              <template slot="title">策略管理</template>
              <el-menu-item  v-for="(val,keys) in typeList" @click="manageStrategy(val.id,val.name)">
                {{val.name}}策略管理
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-if="!item.needData">
            <template v-for="(kids, i) in item.children">
              <template v-if="kids.children==null&&!kids.childNode">
                <el-menu-item :index="kids.path" @click="clickNode1(kids.path)">{{kids.name}}</el-menu-item>
              </template>
              <template v-if="kids.children!==null&&kids.needData">
                <el-submenu :index="kids.path" @click="clickNode1(kids.path)">
                  <template slot="title">{{kids.name}}</template>
                  <template v-if="kids.needData">
                    <template v-if="kid.name!==''" v-for="(kid, i) in kids.children">
                      <el-menu-item :index="kid.path" @click="clickNode1(kid.path)">{{ kid.name }}</el-menu-item>
                    </template>
                  </template>
                </el-submenu>
              </template>
            </template>
          </template>
          <template v-if="item.needList" v-for="(sideItem,index) in setList">
            <el-menu-item class="settingName" @click="chooseSettings(index,sideItem.controlItem)">
              {{ sideItem.name }}
            </el-menu-item>
          </template>
        </el-submenu>
        <template v-if="!item.childNode">
          <el-menu-item :index="item.path">{{ item.name }}</el-menu-item>
        </template>
      </template>


      <!-- </template> -->
    </el-menu>
    <manage-type :manageType="showDeviceType" @closeModel="closeModel"></manage-type>
    <manage-brands :manageBrands="showDeviceBrand" @closeModel="closeModel"></manage-brands>
    <manage-property-personnel :managePropertyPersonnel="showPropertyPersonnel" @closeModel="closeModel"></manage-property-personnel>
    <manage-teaching-staffs :manageUsers="showTeachingStaffs" @closeModel="closeModel"></manage-teaching-staffs>
    <manage-common-user :manageCommonUser="showCommonUser" @closeModel="closeModel"></manage-common-user>
    <manage-groups :manageGroups="showGroups" @closeModel="closeModel"></manage-groups>
    <manage-block :manageBlock="showBlock" @closeModel="closeModel"></manage-block>
    <manage-room-type :manageRoomType="showRoomType" @closeModel="closeModel"></manage-room-type>
  </el-aside>

</template>

<script>
  import axios from 'axios'
  import manageType from "../setting/manageType";
  import manageBrands from "../setting/manageBrands";
  import managePropertyPersonnel from "../setting/managePropertyPersonnel";
  import manageTeachingStaffs from "../setting/manageTeachingStaffs";
  import manageCommonUser from "../setting/manageCommonUser";
  import manageGroups from "../setting/manageGroups";
  import manageBlock from "../setting/manageBlock";
  import manageRoomType from "../setting/manageRoomType";
  import qs from 'qs';
  import { Message } from "element-ui";

  export default {

    components: {

      manageType,
      manageBrands,
      managePropertyPersonnel,
      manageTeachingStaffs,
      manageCommonUser,
      manageGroups,
      manageBlock,
      manageRoomType,
    },
    data () {
      return {
        btndiasbled:false,
         form: {
        cron:30
        },
        formdisabled:false,
        formLabelWidth: '120px',
        showDeviceType: false,
        showDeviceBrand: false,
        showPropertyPersonnel: false,
        showTeachingStaffs: false,
        showCommonUser: false,
        showGroups: false,
        showBlock: false,
        showRoomType: false,
        dialogFormVisible:false,
        cookieCode: '',
        id: '',
        roleId: sessionStorage.getItem('roleId'),
        myIndex: 0,
        // code: "A18",
        index: localStorage.getItem('index') || '0',
        clickIndex: '',
        schoolIds: [], //校区id数组
        typeList:[],
        count: 0,
        sideData: [
          // {
          //   label: 'xiaoqu',
          //   building: [
          //     {label: 'A18', index: '1'},
          //     {label: 'A19', index: '2'}
          //   ],
          //   index: "",
          //   flag:true
          // },
        ],
        listId: 0,
        setList: [
          {
            name: '部门管理',
            controlItem: 'manageDept'
          },
          // {
          //   name: '教职工管理',
          //   controlItem: 'manageTeachingStaffs'
          // },
          // {
          //   name: '策略管理',
          //   controlItem: 'manageStrategies'
          // },
          {
            name: '控制项设置',
            controlItem: 'manageOrders'
          },
          {
            name: '全局配置',
            controlItem: 'globalControl'
          }
        ],
        deviceTypeList: [],
        setManageDeviceList: [
          {
            name:'设备品牌管理',
            controlItem: 'manageBrands'
          },
          {
            name:'设备类型管理',
            controlItem: 'manageType'
          }
        ]
      }
    },
    methods: {

      hwStudy(){
         this.$router.push('/admin/photomanager/hwstudy')
      },


photoshow(){
this.$router.push('/admin/photomanager/photoshow')
},
dialogForm(){
   this.formdisabled=false
  this.dialogFormVisible=true
  this.btndiasbled=false
},
sendcorn(){

if(this.form.cron<30){
   Message({
          message: "频率不正确",
          type: "warning"
        });
         this.formdisabled=false
  this.btndiasbled=false
        return;
}
       this.formdisabled=true
  this.btndiasbled=true
$.ajax({
          type: 'GET',
          url: this.api + 'setcorn',
          data:"corn="+this.form.cron,
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          xhrFields: {
            withCredentials: true
          },
          success: function (res) {
            　var jsonObj = JSON.parse( res );
            console.log(jsonObj.status);
          if(jsonObj.status==1){
   Message({
          message: "设置成功",
          type: "success"
        });
         this.formdisabled=true
  this.btndiasbled=true
          }

          }
        })
this.dialogFormVisible=false
},
      showDeviceList(status){
        this.$router.push({
          path: "/admin",
          query: { isOnline: status }
        });
      },
      changeNav(path){
        this.$router.replace(path)
      },
      getDeviceTypes(){
        axios.get(this.api + 'types').then(res => {
          this.deviceTypeList = res.data
          console.log("11"+this.deviceTypeList)
        })
      },
      open (key,keyPath) {
        console.log(key,keyPath)
      },
      clickNode (buildId, fnum, schoolId, index) {
        // this.code = buildId;
        localStorage.setItem('index', index.toString())
        console.log(index)
        if (this.$route.path.split('/')[1] == 'admin') {
          this.$router.replace({
            path: '/admin/adminHome',
            query: {
              build: buildId,
              fNum: fnum,
              sch: schoolId
            }
          })
        } else {
          this.$router.replace({
            path: '/user/userHome',
            query: {
              build: buildId,
              fNum: fnum,
              sch: schoolId
            }
          })
        }
      },
      clickNode1 (path) {

        localStorage.setItem('index', path)
      },
      chooseSettings (index, controlItem) {
        this.getDeviceTypes()
        console.log(index)
        this.listId = index
        let list = document.getElementsByClassName('settingName')
        console.log(list[index])
        list[index].classList.add('is-active')
        this.$emit('chooseModel', controlItem)
      },
      chooseSettings1 (controlItem) {
        this.$emit('chooseModel', controlItem)
      },


      manageStrategy(deviceTypeId,deviceTypeName){
        this.$emit('manageStrategy',deviceTypeId,deviceTypeName)
      },

      manageDeviceType () { this.showDeviceType = true },
      manageDeviceBrand () { this.showDeviceBrand = true },
      managePropertyPersonnel () { this.showPropertyPersonnel = true },
      manageTeachingStaffs () { this.showTeachingStaffs = true },
      manageCommonUser() { this.showCommonUser = true },
      manageGroups() { this.showGroups = true },
      manageBlock() { this.showBlock = true },
      manageRoomType() { this.showRoomType = true },

      closeModel(){
        // console.log('2323')
        this.showDeviceType = false
        this.showDeviceBrand = false
        this.showPropertyPersonnel = false
        this.showTeachingStaffs = false
        this.showCommonUser = false
        this.showGroups = false
        this.showBlock = false
        this.showRoomType = false
      },


      handleSelect (key, keyPath) {
        // console.log(key);
      },
      initLeftNav () {
        //获取校区侧边栏数据
        let self = this
        $.ajax({
          type: 'GET',
          url: this.api + 'schoolZones',
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          xhrFields: {
            withCredentials: true
          },
          success: function (res) {
            self.initLeftNavCallBack(res)
            console.log(res.toString+"=====================")
          }
        })
      },
      initLeftNavCallBack (res) {
        console.log(res)
        res.forEach(item => {
          this.sideData.push({label: item.name, index: item.id, building: []})
          this.schoolIds.push(item.id)
        })
        this.getData()
        this.getType()
      },
      getData () {//构造侧边栏数据结构
        // for (let i = 0; i < this.schoolIds.length; i++) {
        if (this.count >= this.schoolIds.length) {//递归结束条件
          return
        }
        axios.get(this.api + 'buildings', {
          params: {zoneId: this.schoolIds[this.count]},
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true,
        }).then(res => {
          console.log(this.count)
          this.initBuilding(res)
          this.getData()
        })
      },
      initBuilding (res) {
        let len = this.sideData.length
        let data = res.data
        let lenB = data.length
        // console.log(this.count)
        if (this.count < this.schoolIds.length) {
          for (let j = 0; j < lenB; j++) {
            let arr = this.sideData[this.count].building.push({
              label: data[j].name,
              index: data[j].id,
              floors: data[j].floors,
              myIndex: this.myIndex++
            })
          }
        }
        this.count += 1
        //  console.log(this.sideData)
        localStorage.setItem('initFloorNum', this.sideData[0].building[0].floors)
        localStorage.setItem('initBuildId', this.sideData[0].building[0].index)
        localStorage.setItem('initschoolId', this.sideData[0].index)
        // this.index =  this.sideData[0].building[0].index
      },
      getType () {
        let self = this
        this.typeList = []
        // var temp = []
        $.ajax({
          type: 'GET',
          url: this.api + 'types',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          async: false,
          success(data) {
            self.typeList = data
          },
          error() {
            console.log('error')
          }
        })
        console.log(this.typeList)
      },

      changeCss () {
        let list = document.getElementsByClassName('settingName')
        list[this.listId].classList.remove('is-active')
      }
    },
    watch: {},
    mounted () {
      if (this.$route.path.split('/')[1] == 'user') {
        this.id = 3
      } else if (this.$route.path.split('/')[1] == 'admin') {
        this.id = 2
      }else {
        this.id = 4
      }
      this.roleId = sessionStorage.getItem('roleId')
      // console.log('~~~~~'+this.roleId)
      this.count = 0
      this.sideData = []
      this.initLeftNav()
    }
  }
</script>
<style>
  /*el-container*/
  .el-aside {
    position: absolute;
    top: 80px;
    bottom: 0;
    background: #001529;
    overflow: hidden;
    overflow-y: auto;
  }

  .el-menu {
    border: 0;
    background: #001529;
  }

  .el-submenu__title, .el-menu-item {
    color: #BBBBBB;
  }

  .el-submenu.is-active .el-submenu__title {
    color: #fff;
  }

  .el-submenu__title:hover {
    color: #fff;
    background: #001529;
  }

  .el-menu-item.is-active, .el-menu-item.is-active:hover {
    color: #fff;
    background-color: #1890ff;
  }

  .el-menu-item:hover {
    color: #fff;
    background: #001529;
  }

  .settingName.is-active {
    color: #fff;
    background-color: #1890ff;
  }
</style>
